.wrapper {
  width: 1000px;
  margin: 0 auto;

  .content {
    min-width: 420px;
    width: 1000px;
    height: 658px;

    h1 {
      font-size: 26px;
      padding-bottom: 0;
      word-wrap: break-word;
      display: block;
      font-weight: bold;
      color: #494949;
      margin: 0;
      padding: 0 0 15px 0;
      line-height: 1.1;
    }

    .grid {
      display: block;

      .article {
        padding-right: 25px;
        width: 675px;
        float: left;

        .main {
          width: 675px;

          .explore-title {
            padding: 20px 0;
            position: sticky;
            top: 0;
            z-index: 100;
            background-color: #fff;
            font-size: 13px;

            .explore-selectors {
              display: flex;
              align-items: center;
              width: 675px;

              .explore-selectors-main {
                flex: 1;
                display: flex;
                align-items: center;

                .explore-selectors-item {
                  font-size: 14px;
                  cursor: pointer;
                  margin-right: 10px;
                  position: relative;

                  .explore-selectors-item-title {
                    padding: 3px 20px 3px 0px;
                    position: relative;
                    border-radius: 2px;

                    &>span {
                      font-size: 14px;
                      cursor: pointer;
                      margin-right: 10px;
                    }

                    &>img {
                      width: 10px;
                      height: 10px;
                    }
                  }

                  .expand {
                    position: absolute;
                    width: 675px;
                    top: 25px;
                    z-index: 10;
                    padding: 10px;
                    border-radius: 2px;
                    background-color: #f0f3f5;

                    .expand-main {
                      margin-top: 10px;

                      .expand-list {
                        display: flex;
                        flex-wrap: wrap;
                        margin-left: -10px;
                        margin-right: -10px;
                        padding-inline-start: 0px;

                        .expand-list-item {
                          list-style: none;
                          margin-bottom: 10px;
                          margin-right: 10px;
                          margin-left: 10px;

                          .expand-type {
                            background-color: rgb(255, 255, 255);
                            margin: 0px;
                            border: none;
                            box-shadow: none;
                            color: #1a1a1a;

                            &>span {
                              display: inline-block;
                              vertical-align: middle;
                              background-color: #fff;
                              color: #1a1a1a;
                            }
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }

          .explore-main {
            width: 675px;
            height: 528px;

            .explore-list {
              display: flex;
              flex-wrap: wrap;
              margin-left: -5px;
              margin-right: -5px;
              margin-top: 10px;
              padding-inline-start: 0px;

              li {
                width: 50%;
                margin-bottom: 20px;
                box-sizing: border-box;
                padding-left: 5px;
                padding-right: 5px;
                list-style: none;

                a:link {
                  color: #37a;
                  text-decoration: none;

                  .card {
                    display: flex;

                    .card-cover {
                      margin-right: 15px;
                      max-height: 112px;
                      width: 80px;

                      .card-cover-container {
                        padding-top: 140%;
                        position: relative;

                        .card-cover-pic {
                          position: absolute;
                          width: 100%;
                          height: 100%;
                          inset: 0px;
                          display: block;
                          object-fit: cover;
                        }
                      }
                    }

                    .card-main {
                      height: 112px;

                      .card-main-info {
                        .info-title {
                          color: #1a1a1a;
                          font-size: 15px;
                          font-weight: 500;
                          line-height: 20px;
                          margin: 0 0 5px;

                          &>span {
                            color: #27a;
                            font-weight: 400;
                            font-size: 15px;
                            line-height: 20px;
                            margin: 0 0 5px;
                          }

                          .info-subtitle {
                            color: #1a1a1a;
                            font-size: 13px;
                            font-weight: 400;
                          }
                        }
                      }

                      .card-main-rate {
                        margin-bottom: 5px;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }

      .aside {
        width: 300px;
        float: right;
      }
    }
  }
}